+section('Getting started')
  +subsection('Package content')
    p.typo__p
      | Simple, lightweight model-based validation for Vue.js
    p.typo__p
      | You can read the <a class="typo__link" href="http://monterail.com/blog/2016/rethinking-validations-for-vue-js/" alt="Rethinking validations for vue.js" target="_BLANK">introduction post</a> for more insight on how this solution differs from other validation libraries.
  +subsection('Installation')
    p.typo__p
      | Package is installable via npm
    pre.language-bash
      code.
        npm install vuelidate --save
  +subsection('Basic usage')
    p.typo__p
      | You can import the library and <kbd>use</kbd> as a Vue plugin to enable
      | the functionality globally on all components containing validation configuration.
    pre.language-javascript
      code.
        import Vue from 'vue'
        import Vuelidate from 'vuelidate'
        Vue.use(Vuelidate)
    p.typo__p
      | Alternatively it is possible to import a mixin directly to components
      | in which it will be used.
    pre.language-javascript
      code.
        import { validationMixin } from 'vuelidate'

        var Component = Vue.extend({
          mixins: [validationMixin],
          validations: { ... }
        })
    p.typo__p
      | If you prefer using <kbd>require</kbd>, it can be used instead of <kbd>import</kbd> statements.
      | This works especially great with destructuring syntax.
    pre.language-javascript
      code.
        const { validationMixin, default: Vuelidate } = require('vuelidate')
        const { required, minLength } = require('vuelidate/lib/validators')
    p.typo__p
      | The browser-ready bundle is also provided in the package.
    pre(v-pre).language-html
      code='<script src="vuelidate/dist/vuelidate.min.js"></script>'
    pre.language-javascript
      code.
        // global
        Vue.use(window.vuelidate.default)

        // local mixin
        var validationMixin = window.vuelidate.validationMixin
    p.typo__p
      | Check out the <a href="https://jsfiddle.net/Frizi/b5v4faqf/">JSFiddle example</a> which uses this setup.
